<template>
  <div class="assessment_questionnaire_record">
    <c-title :hide="false" text="历史记录"></c-title>
    <div class="record_list" v-for="(item, index) in info" :key="index">
      <div class="title">{{ item.title }}</div>
      <div class="line">ID:{{ item.id }}</div>
      <div class="line" v-if="item.status == 2">免费</div>
      <div class="line" v-else>付费：{{ item.amount }}元</div>
      <div class="line">测评时间：{{ item.created_at }}</div>
      <div class="btnBox">
        <div class="btn watchRecord" @click="watchQuestion(item)">查看记录</div>
        <div class="btn" @click="watchReport(item)">查看报告</div>
      </div>
    </div>
    <van-popup v-model="show" :style="{ background: 'transparent' }">
      <div class="submitPopupimg">
        <img :src="imgHost" alt="" />
      </div>
      <div class="submitPopup">
        <div class="txt">提交完成，是否查看测评报告？</div>
        <div class="freeBtn" @click="Unlock">{{ resultDetail.rest_count > 0 ? "免费查看" : "付费查看" }}</div>
        <div class="cancelBtn" @click="show = fale">取消</div>
        <div class="txt_tips" v-if="resultDetail.rest_count > 0">剩余免费查看次数为：{{ resultDetail.rest_count }}</div>
      </div>
      <div class="closeBtn">
        <i class="iconfont icon-adsystem_icon_cancle" @click="show = false"></i>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import teamVue from "../consensus_activity/app/team.vue";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      isLoadMore: true,
      page: 1,
      total_page: 0,
      info: [],
      show: false,
      resultDetail: []
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
      this.info = [];
      this.show = false;
      this.imgHost = `${window.location.origin}/static/local/assessment/assessment_icon_1.png`;
    },
    watchQuestion(item) {
      console.log(item);
      this.$router.push(this.fun.getUrl("assessment_questionnaire", { id: item.id, view: true }));
    },
    async watchReport(item) {
      if (item.status == 0) {
        this.resultPost(item.id);
        return;
      } else {
        this.$router.push(this.fun.getUrl("assessmentReport", { id: item.id, view: true }));
      }
    },
    Unlock() {
      if (this.resultDetail.is_pay == 0 && this.resultDetail.rest_count > 0) {
        // 免费解锁
        $http
          .post("plugin.assessment.frontend.question.freeResult", { id: this.resultDetail.id }, "")
          .then(response => {
            if (response.result === 1) {
              this.$router.push(this.fun.getUrl("assessmentReport", { id: this.resultDetail.id, view: true }));
            } else {
              this.$toast(response.msg);
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        // 付费
        $http
          .post("plugin.assessment.frontend.create.index", { ass_log_id: this.resultDetail.id }, "")
          .then(response => {
            if (response.result === 1) {
              this.$router.push(this.fun.getUrl("orderpay_assessment", { order_ids: response.data.order_ids, ass_log_id: this.resultDetail.id }, { view: "record" }));
            } else {
              this.$toast(response.msg);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    resultPost(rid) {
      $http
        .post("plugin.assessment.frontend.question.resultDetail", { id: rid }, "")
        .then(response => {
          if (response.result === 1) {
            this.show = true;
            this.resultDetail = response.data;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getData() {
      $http
        .post("plugin.assessment.frontend.question.resultLog", { page: this.page }, "")
        .then(response => {
          if (response.result === 1) {
            this.info = response.data.data;
            this.isLoadMore = true;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      let json = {};
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        json.page = this.page;
        $http.get("plugin.assessment.frontend.question.resultLog", json, "加载中").then(response => {
          this.isLoadMore = true;
          if (response.result === 1) {
            let myData = response.data.data;
            this.info = this.info.concat(myData); //数组拼接
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.assessment_questionnaire_record{
  padding-bottom: 2rem;
}
.record_list {
  margin: 0.63rem 0.75rem 0 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.94rem 0.75rem;
  .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 0.94rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }
  .line {
    text-align: left;
    font-size: 0.81rem;
    color: #6e6e79;
    margin-bottom: 0.63rem;
  }
  .line:last-child {
    margin-bottom: 0;
  }
  .btnBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn {
      padding: 0.44rem 0.59rem;
      font-size: 0.88rem;
      color: #ffffff;
      box-sizing: border-box;
      background: #f15353;
      border-radius: 1.13rem;
    }
    .watchRecord {
      border: 0.03rem solid #f15353;
      background: #ffffff;
      color: #f15353;
      margin-right: 0.63rem;
    }
  }
}
.submitPopupimg {
  width: 9.375rem;
  height: 7.8125rem;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.submitPopup {
  width: 15.63rem;
  background: #ffffff;
  border-radius: 0.75rem;
  margin-top: -4.4688rem;
  padding-top: 4.16rem;
  padding-bottom: 1.09rem;
  .freeBtn {
    width: 11.06rem;
    height: 2.25rem;
    background: #f15353;
    border-radius: 1.25rem;
    text-align: center;
    line-height: 2.25rem;
    font-size: 0.88rem;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 1.44rem;
  }
  .cancelBtn {
    width: 11.06rem;
    height: 2.25rem;
    border: 0.03rem solid #d6d6dc;
    border-radius: 1.25rem;
    text-align: center;
    line-height: 2.25rem;
    margin: 0 auto;
    margin-top: 0.63rem;
  }
  .txt_tips {
    font-size: 0.75rem;
    color: #6e6e79;
    text-align: center;
    margin-top: 0.8rem;
  }
  .txt {
    font-size: 0.88rem;
    font-weight: 500;
  }
}
.closeBtn {
  width: 15.63rem;
  text-align: center;
  margin-top: 1.25rem;
  .icon-adsystem_icon_cancle {
    font-size: 3rem;
    color: #d6d6dc;
  }
}
</style>
